.moveable-control {
  position: absolute;
  //width: var(--ss) !important;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  background: var(--moveable-control) !important;
  margin-top: -7px;
  margin-left: -7px;
  z-index: 10;
}

//左上
.moveable-nw {
  border-radius: 0 !important;
  width: calc(var(--direction-width) * 1px) !important;
  height: calc(var(--direction-height) * 1px) !important;
  margin-left: calc(var(--direction-width) / -2 * 1px) !important;
  margin-top: calc(var(--direction-height) / -2 * 1px) !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: calc(var(--direction-width) * 1px);
    height: 3px;
    position: absolute;
    background: var(--moveable-control);
    left: calc((var(--direction-width) - 2) / 2 * 1px);
    top: calc((var(--direction-height) - 2) / 2 * 1px);
  }

  &:after {
    content: " ";
    width: 3px;
    height: calc(var(--direction-height) * 1px);
    position: absolute;
    background: var(--moveable-control);
    left: calc((var(--direction-width) - 2) / 2 * 1px);
    top: calc((var(--direction-height) - 2) / 2 * 1px);
  }
}


//右上
.moveable-ne {
  border-radius: 0 !important;
  width: calc(var(--direction-width) * 1px) !important;
  height: calc(var(--direction-height) * 1px) !important;
  margin-left: calc(var(--direction-width) / -2 * 1px) !important;
  margin-top: calc(var(--direction-height) / -2 * 1px) !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: calc(var(--direction-width) * 1px);
    height: 3px;
    position: absolute;
    background: var(--moveable-control);
    left: calc((var(--direction-width) - 2) / -2 * 1px);
    top: calc((var(--direction-height) - 2) / 2 * 1px);
  }

  &:after {
    content: " ";
    width: 3px;
    height: calc(var(--direction-height) * 1px);
    position: absolute;
    background: var(--moveable-control);
    left: calc(((var(--direction-width) - 2) / 2 - 1) * 1px);
    top: calc((var(--direction-height) - 2) / 2 * 1px);
  }
}

//左下
.moveable-sw {
  border-radius: 0 !important;
  width: calc(var(--direction-width) * 1px) !important;
  height: calc(var(--direction-height) * 1px) !important;
  margin-left: calc(var(--direction-width) / -2 * 1px) !important;
  margin-top: calc(var(--direction-height) / -2 * 1px) !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: calc(var(--direction-width) * 1px);
    height: 3px;
    position: absolute;
    background: var(--moveable-control);
    left: calc((var(--direction-width) - 2) / 2 * 1px);
    top: calc(((var(--direction-height) - 2) / 2 - 1) * 1px);
  }

  &:after {
    content: " ";
    width: 3px;
    height: calc(var(--direction-height) * 1px);
    position: absolute;
    background: var(--moveable-control);
    left: calc((var(--direction-width) - 2) / 2 * 1px);
    top: calc((var(--direction-height) - 2) / -2 * 1px);
  }
}

//右下
.moveable-se {
  border-radius: 0 !important;
  width: calc(var(--direction-width) * 1px) !important;
  height: calc(var(--direction-height) * 1px) !important;
  margin-left: calc(var(--direction-width) / -2 * 1px) !important;
  margin-top: calc(var(--direction-height) / -2 * 1px) !important;
  background: transparent !important;
  border: none !important;

  &:before {
    content: " ";
    width: calc(var(--direction-width) * 1px);
    height: 3px;
    position: absolute;
    background: var(--moveable-control);
    left: calc((var(--direction-width) - 2) / -2 * 1px);
    top: calc(((var(--direction-height) - 2) / 2 - 1) * 1px);
  }

  &:after {
    content: " ";
    width: 3px;
    height: calc(var(--direction-height) * 1px);
    position: absolute;
    background: var(--moveable-control);
    left: calc(((var(--direction-width) - 2) / 2 - 1) * 1px);
    top: calc((var(--direction-height) - 2) / -2 * 1px);
  }
}

// 左中
.moveable-w {
  border-radius: 0 !important;
  width: 3px !important;
  transform-origin: 1px 50%;
  height: calc(var(--direction-height) * 1px) !important;
  margin-left: -1px !important;
  margin-top: calc(var(--direction-height) / -2 * 1px) !important;
  background: transparent !important;
  border-left: solid 3px var(--moveable-control) !important;
  border-bottom: none !important;
  border-top: none !important;
  border-right: none !important;
}

// 上中
.moveable-n {
  border-radius: 0 !important;
  width: calc(var(--direction-width) * 1px) !important;
  height: 3px !important;
  transform-origin: 50% 1px;
  margin-left: calc(var(--direction-width) / -2 * 1px) !important;
  margin-top: -1px !important;
  background: transparent !important;
  border-top: solid 3px var(--moveable-control) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

// 右中
.moveable-e {
  border-radius: 0 !important;
  width: 3px !important;
  transform-origin: 2px 50%;
  height: calc(var(--direction-height) * 1px) !important;
  margin-left: -2px !important;
  margin-top: calc(var(--direction-height) / -2 * 1px) !important;
  background: var(--moveable-control) !important;
  border: none !important;
}

// 下中
.moveable-s {
  border-radius: 0 !important;
  width: calc(var(--direction-width) * 1px) !important;
  transform-origin: 50% 2px;
  height: 3px !important;
  margin-left: calc(var(--direction-width) / -2 * 1px) !important;
  margin-top: -2px !important;
  background: transparent !important;
  border-bottom: solid 3px var(--moveable-control) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

// 中间
.moveable-origin {
  background: transparent !important;
  border: none !important;
}

.moveable-origin:before {
  content: " ";
  width: 1px;
  height: 7px;
  position: absolute;
  background: var(--moveable-control);
  left: 6px;
  top: 3px;
}

.moveable-origin:after {
  content: " ";
  width: 7px;
  height: 1px;
  position: absolute;
  background: var(--moveable-control);
  left: 3px;
  top: 6px;
}

.moveable-control-box[data-able-groupable="true"] {

  .moveable-line {
    background: var(--drag-h-color) !important;
    //border-bottom: 1px dashed var(--drag-h-color);
  }

  .moveable-line.moveable-direction {
    //background: transparent !important;
    //border-bottom: none !important;
    display: block !important;
  }
}

.moveable-control-box {

  .moveable-line {
    background: transparent !important;
    //border-bottom: 1px dashed var(--drag-h-color);
  }

  .moveable-bounds {
    background: var(--bounds-color) !important;
  }

  // -- 水平 --
  // 辅助线 加粗 -
  //moveable-line moveable-guideline moveable-horizontal moveable-bold
  .moveable-line.moveable-guideline.moveable-horizontal.moveable-bold {
    background: var(--drag-h-color) !important;
  }

  // 辅助线 - 虚线组
  // moveable-guideline-group moveable-horizontal

  // 辅助线 -虚线
  .moveable-line.moveable-guideline.moveable-horizontal.moveable-dashed {
    border-top: 1px dashed red;
    border-top-color: red;
  }

  // 辅助线 -文本
  //moveable-size-value moveable-gap

  // 边界
  .moveable-line.moveable-guideline.moveable-horizontal.moveable-target.moveable-bold.moveable-bounds {
    background: var(--bounds-color) !important;
  }

  // -- 垂直 --
  .moveable-line.moveable-guideline.moveable-vertical.moveable-bold {
    background: var(--drag-h-color) !important;
  }

  .moveable-line.moveable-guideline.moveable-vertical.moveable-dashed {
    border-left: 1px dashed red;
    border-left-color: red;
  }

  // 边界
  .moveable-line.moveable-guideline.moveable-vertical.moveable-target.moveable-bold.moveable-bounds {
    background: var(--bounds-color) !important;
  }

  .moveable-line.moveable-guideline.moveable-horizontal {
    //background: transparent !important;
    //border-bottom: none !important;
  }

  .moveable-line.moveable-direction {
    //background: transparent !important;
    //border-bottom: none !important;
    display: none;
  }

  .moveable-line.moveable-guideline.moveable-bounds {
    background: var(--bounds-color) !important;
  }

  .moveable-guideline-group {
    .moveable-guideline.moveable-gap {
      background: var(--drag-h-color) !important;
    }
  }

  .moveable-rotation {
    height: calc(20px * var(--zoom)) !important;

    .moveable-rotation-line {
      margin-left: -1px;
      border-right: 1px dashed var(--moveable-control);
    }

    .moveable-rotation-control {
      border: none !important;
      width: 10px !important;
      height: 10px !important;
      margin-left: -5px !important;
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" ><path d="M7.9,15.1c-4,0-7.3-3.3-7.3-7.3s3.3-7.3,7.3-7.3c1.7,0,3.4,0.6,4.7,1.7l0.9-0.9c0.2-0.2,0.4-0.3,0.7-0.3   c0.1,0,0.3,0,0.4,0.1c0.4,0.2,0.6,0.5,0.6,0.9v4c0,0.5-0.4,1-1,1h-4c-0.4,0-0.7-0.2-0.9-0.6C9.1,6.2,9.2,5.7,9.5,5.5l0.9-0.9   C9.7,4,8.8,3.7,7.9,3.7c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2c1.3,0,2.5-0.6,3.3-1.6c0.1-0.1,0.3-0.2,0.5-0.3c0,0,0,0,0,0   c0.2,0,0.4,0.1,0.5,0.2l1.2,1.3c0.2,0.2,0.3,0.6,0,0.9C12.1,14.2,10,15.1,7.9,15.1z" stroke-linejoin="round" stroke-width="1.2" stroke="white" fill="black"></path></svg>') 8 8, alias !important;
    }
  }

}


.moveable-guideline {
  //background: var(--bounds-color) !important;
}


.selectClass {
  background: var(--drag-h-color1) !important;
  border: 1px solid var(--drag-h-color) !important;
}
